<!-- 组合式 -->
<script setup>
	import {
		ref,
		reactive,
		watch,
		onMounted,
	} from 'vue';
	
	// pinia
	import {
		useUserStore,
	} from "@/stores";
	import api from '@/api/api';
	import util from '@/utils/util';
	
	import loginFormVue from '@/views/login/components/login-form.vue';
	import loginForm2Vue from '@/views/login/components/login-form2.vue';

	// 参数
	const pages = reactive({
		type: 1,
	})

	// 挂载
	onMounted(() => {
		init(); // 初始化
	})

	// 初始化
	async function init() {
		// util.showLoading();

		// await api.

		// util.hideLoading();
	}

	// 登录、注册
	async function changeLogin(data) {
		const res = await api.user.login(data);
		// 改流程了
		// return 
		
		// 1：第一次注册
		// if(res.data.flag == 1) {
		// 	// 完善用户信息
		// 	pages.type = 2;
		// 	return;
		// }
		
		// 登录成功
		useUserStore().login(res.data.token)
		
		// 用户信息
		api.getUser();
	}
	
	// 注冊
	async function changeSave(data) {
		// await api.userSave(data);
		
		localStorage.setItem("token", '--')
		util.to('/home')
	}
</script>

<template>
	<div class="login-home">
		
		<div class="login-home-left">
			<img class="image" :src="util.getImageUrl('login-back.png')" alt="cover" />
			<img class="login-logo" :src="util.getImageUrl('login-logo.png')" alt="cover" />
		</div>

		<div class="login-home-right">
			<!-- @register="pages.type = 2" -->
			<login-form-vue v-model:type="pages.type" @login="changeLogin" v-if="pages.type == 1"/>
			<login-form2-vue v-model:type="pages.type" @save="changeSave" v-else/>
		</div>
		
	</div>
</template>

<style lang="scss" scoped>
	.login-home {
		display: flex;
		align-items: center;
		height: 100vh;
		overflow: hidden;
		background-color: #F1F4FB;

		.login-home-left {
			position: relative;
			height: 100%;
			flex: 1;

			.image {
				width: 100%;
				height: 100%;
			}

			.login-logo {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 45%;

				width: 60%;
				// width: 863px;
				// height: 106px;
				// transform: translateY(-50%);
			}
		}

		.login-home-right {
			width: 35vw;

			.login-home-form {}
		}
	}
</style>